<template>
  <t-layout class="layout-container">
    <tab-nav />
    <router-view>
      <template #default="{ Component, route }">
        <keep-alive>
          <Transition name="fade" mode="out-in"> <!-- 入场：enter-active-class 离场：leave-active-class -->
            <div :key="route.path" class="layout-content common-scrollbar">
              <l-breadcrumb />
              <div class="layout-content-view">
                <component :is="Component" :key="route.path" />
              </div>
              <l-footer-layout />
            </div>
          </Transition>
        </keep-alive>
      </template>
    </router-view>
  </t-layout>
</template>

<script setup lang="ts">
import TabNav from './TabNav.vue';
import LBreadcrumb from './Breadcrumb.vue'
import LFooterLayout from './Footer.vue'
// import { getActive } from '@/router';

// const action = computed(() => getActive())

</script>

<style lang="less" scoped>
.layout-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  // background-color: var(--el-bg-color-page);

  .layout-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;

    &-view {
      flex: 1;
      padding: 15px;
    }

  }

}

// 进入后和离开前保持原位
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: none;
}

// 设置进入和离开过程中的动画时长0.5s
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

// 进入前和离开后为透明，并在右侧20px位置
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>
